<template>
    <el-container>
        <el-header v-show="activeIndex != 'IdentityRegisterUrl'">
            <div class="header-content">
                <div class="logo">Sign.Cash</div>
                <div class="menu">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                             @select="handleSelect">
                        <el-menu-item index="transaction">发起交易</el-menu-item>
                        <el-menu-item index="autograph">解码广播</el-menu-item>
                        <el-menu-item index="message">验证消息</el-menu-item>
                        <el-menu-item index="address">地址转换</el-menu-item>
                        <el-menu-item index="generateAddress">生成地址</el-menu-item>
                        <el-menu-item index="textEncryption">文本加密</el-menu-item>
                        <el-menu-item index="hashCount">哈希计算</el-menu-item>
                        <!--<el-menu-item index="relationshipDeclaraction">关系声明</el-menu-item>-->
                        <el-menu-item index="identityRegister">用户登记</el-menu-item>
                    </el-menu>
                </div>
                <div class="languageType">
                    <el-select v-model="language" size="small" placeholder="请选择">
                        <el-option
                            v-for="item in languages"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="advertisements" v-show="activeIndex != 'IdentityRegisterUrl'">密签APP让手机秒变离线钱包!</div>
            <div class="coin-type" v-if="ishow">
                <el-radio-group v-model="cointype" size="small">
                    <el-radio-button label="fch">FCH</el-radio-button>
                    <el-radio-button label="bch">BCH</el-radio-button>
                    <el-radio-button label="btc">BTC</el-radio-button>
                </el-radio-group>
            </div>
            <div class="content">
                <keep-alive>
                    <router-view :proParm="cointype" name="main"></router-view>
                </keep-alive>
            </div>
            <el-footer v-show="activeIndex != 'IdentityRegisterUrl'">
                <div class="content">
                    <div class="flag">
                        <div class="main-title">Sign.Cash</div>
                        <div class="sub-title">©copyright sign.cash 2019.all rights reserved</div>
                        <div class="sub-title">粤ICP备1588941215号-1</div>
                    </div>
                    <div class="introduce">
                        <div class="in-title">公司</div>
                        <div class="in-item">关于我们</div>
                        <div class="in-item">加入我们</div>
                        <div class="in-item">联系我们</div>
                        <div class="in-item">合作伙伴</div>
                    </div>
                    <div class="qr-code">
                        <div class="code-item">
                            <img :src="leftCodeUrl"/>
                            <div class="code-type">密签</div>
                            <div class="code-tool">使用手机扫描二维码下载</div>
                        </div>
                        <div class="code-item">
                            <img :src="rightCodeUrl"/>
                            <div class="code-type">一直扫</div>
                            <div class="code-tool">使用手机扫描二维码下载</div>
                        </div>
                    </div>
                </div>
            </el-footer>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Web",
        data() {
            return {
                activeIndex: '',
                cointype: 'fch',
                languages: [
                    {label: '简体中文', value: '简体中文'}
                ],
                language: '简体中文',
                leftCodeUrl: './static/images/miqian.png',
                rightCodeUrl: './static/images/yizhisao.png',
                ishow: true
            }
        },
        mounted() {
            let path = this.$route.path.split('/')[1];
            if (path) {
                this.activeIndex = path;
            } else {
                this.activeIndex = 'transaction'
            }
            if (path === 'hashCount' || path === 'identityRegister' || path === 'relationshipDeclaraction' || path === 'IdentityRegisterUrl') {
                this.ishow = false;
            }
        },
        methods: {
            handleSelect(val) {
                this.$router.push('/' + val);
                if (val === 'hashCount' || val === 'identityRegister' || val === 'relationshipDeclaraction' || val === 'IdentityRegisterUrl') {
                    this.ishow = false;
                } else {
                    this.ishow = true;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .el-container {
        width: 100%;
        min-height: 100%;
        min-width: 1100px;
        background-color: #f3f5f8;

        /deep/ .el-menu {
            width: auto;
            margin: 0 20px;
            background-color: transparent;

            .el-menu-item {
                padding: 0 10px;
            }
        }

        /deep/ .el-menu--horizontal {
            & > .el-menu-item {
                border: none;
                color: #ffffff;

                &:hover {
                    background-color: #337bc4;
                }
            }

            & > .is-active {
                background-color: #337bc4;
                border: none;
            }
        }

        /deep/ .el-radio-button {
            .el-radio-button__inner {
                padding: 9px 30px;
                border-top: none;
            }

            &:first-child .el-radio-button__inner {
                border-radius: 0;
                border-left: none;
            }

            &:last-child .el-radio-button__inner {
                border-radius: 0;
                border-left: none;
                border-right: none;
            }
        }

        /deep/ .el-header {
            background-color: #409EFF;

            .header-content {
                width: 1000px;
                height: 100%;
                margin: 0 auto;
                display: flex;

                .logo {
                    font-size: 28px;
                    font-family: 楷体;
                    color: #ffffff;
                    line-height: 60px;
                }

                .menu {
                    flex: 1;
                }

                .languageType {
                    padding: 14px 0;

                    .el-input__inner {
                        width: 120px;
                        background-color: transparent;
                        color: #ffffff;
                    }

                    .el-select .el-input .el-select__caret {
                        color: #ffffff;
                    }
                }
            }
        }

        /deep/ .el-main {
            flex: 1 0 auto;
            padding: 0;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;

            .advertisements {
                width: 1000px;
                margin: 0 auto;
                padding: 15px 0;
                font-size: 14px;
                color: #337bc4;
            }

            .coin-type {
                width: 1000px;
                margin: 0 auto;
            }

            .content {
                width: 1000px;
                margin: 0 auto;
                flex: 1;
                box-sizing: border-box;
                background-color: #ffffff;
                padding: 20px;
            }

            .el-footer {
                width: 100%;
                height: 190px !important;
                background-color: #2f3946;

                .content {
                    width: 1000px;
                    height: auto;
                    margin: 0 auto;
                    background-color: transparent;
                    padding-top: 15px;
                    display: flex;
                    color: #8c99ad;

                    .flag {
                        .main-title {
                            font-size: 28px;
                            font-family: 楷体;
                            color: #ffffff;
                        }

                        .sub-title {
                            margin-top: 6px;
                            font-size: 12px;
                        }
                    }

                    .introduce {
                        flex: 1;
                        margin-left: 50px;

                        .in-title {
                            line-height: 36px;
                        }

                        .in-item {
                            line-height: 26px;
                            font-size: 12px;
                        }
                    }

                    .qr-code {
                        display: flex;

                        .code-item {
                            padding: 0 15px;
                            text-align: center;

                            img {
                                width: 100px;
                                height: 100px;
                            }

                            .code-type {
                                text-align: center;
                                font-size: 12px;
                                color: #ffffff;
                            }

                            .code-tool {
                                text-align: center;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
